// 颜色键值对——键一定是有序添加
$allColors: (
    blue: var(--Colors-Use-Blue-Bg-Hover),
    cyan: var(--Colors-Use-Cyan-Bg),
    green: var(--Colors-Use-Green-Bg),
    grey: var(--Colors-Use-Grey-Bg),
    orange: var(--Colors-Use-Orange-Bg),
    purple: var(--Colors-Use-Purple-Bg),
    red: var(--Colors-Use-Error-Primary),
    yellow: var(--Colors-Use-Yellow-Bg)
);

$generateColors: (
    blue: var(--Colors-Use-Blue-Primary),
    cyan: var(--Colors-Use-Cyan-Primary),
    green: var(--Colors-Use-Green-Primary),
    grey: var(--Colors-Use-Grey-Primary),
    orange: var(--Colors-Use-Orange-Primary),
    purple: var(--Colors-Use-Purple-Primary),
    red: var(--Colors-Use-Error-Primary),
    yellow: var(--Colors-Use-Yellow-Primary)
);


$allColors-hover: (
    blue: var(--Colors-Use-Blue-Border),
    cyan: var(--Colors-Use-Cyan-Bg-Hover),
    green: var(--Colors-Use-Green-Bg-Hover),
    grey: var(--Colors-Use-Neutral-Text-4-Help-text),
    orange: var(--Colors-Use-Orange-Bg-Hover),
    purple: var(--Colors-Use-Purple-Bg-Hover),
    red: var(--Colors-Use-Error-Pressed),
    yellow: var(--Colors-Use-Yellow-Bg-Hover)
);

// 获取全部颜色集合里的颜色
@function fetch-color($type, $kind) {
    @return map-get($allColors, $type);
}
@function fetch-hover-color($type, $kind) {
    @return map-get($allColors-hover, $type);
}
@function fetch-GenerateColor($type, $kind) {
    @return map-get($generateColors, $type);
}

// 生成颜色带指定透明度
@function generate-transparen($color, $alph) {
    @return color-mix(in srgb, $color $alph, transparent);
}

// 生成颜色数组的类名
@function generate-class-name($types: ()) {
    @if length($types) ==0 {
        @return "";
    } @else {
        $strs: "";
        @each $type in $types {
            @if str-length($strs) ==0 {
                $strs: #{$type};
            } @else {
                $strs: #{$strs}-#{$type};
            }
        }
        @return $strs;
    }
}

// 生成颜色数组渐变色
@function generate-gradient($colors, $alph) {
    $colorMixs: ();
    @each $color in $colors {
        $colorMixs: append($colorMixs, #{generate-transparen($color, $alph)});
    }
    @return linear-gradient(join($colorMixs, (), $separator: comma));
}

// 生成变量数组对q应的颜色数组
@function generate-colors($types: ()) {
    $colorArr: ();
    @each $type in $types {
        $colorArr: append($colorArr, #{fetch-GenerateColor($type, "backgroundColor")}, $separator: comma);
    }
    @return $colorArr;
}

// 获取数组指定范围的元素并生成一个新的数组
@function get-range($arr, $start, $end: null) {
    $end: if($end == null, length($arr), $end);
    $result: ();
    @for $i from $start through $end {
        $result: append($result, nth($arr, $i), $separator: comma);
    }
    @return $result;
}

// 生成颜色变量数组的全排列类名
@mixin generate-permutations-class-name($allTypes: (), $prefix: ()) {
    // 剩余需要遍历的变量数组为空
    @if length($allTypes) != 0 {
        @each $type in $allTypes {
            $pre: append($prefix, $type, $separator: comma);
            @if length($pre) == 1 {
                // 单色情况
                @if $type == red {
                    // 单色-红色单独处理
                    .virtual-table-cell-#{$type} {
                        background: generate-transparen(#{fetch-color($type, "backgroundColor")}, 100%);
                        color: var(--Colors-Use-Error-On-Primary);
                        font-weight: bold;
                    }

                    .virtual-table-hover-cell-#{$type} {
                        background: var(--Colors-Use-Error-Pressed);
                        color: var(--yakit-colors-Error-100);
                    }
                    .virtual-table-hover-cell-#{$type}.virtual-table-cell-#{$type} {
                        background: var(--Colors-Use-Error-Pressed);
                        color: var(--Colors-Use-Error-On-Primary);
                    }

                    .virtual-table-active-cell-#{$type} {
                        background: var(--Colors-Use-Error-Pressed);
                        color: var(--yakit-colors-Error-100);
                    }
                    .virtual-table-active-cell-#{$type}.virtual-table-cell-#{$type} {
                        background: var(--Colors-Use-Error-Pressed);
                        color: var(--yakit-colors-Error-100);
                    }
                    .virtual-table-active-cell-#{$type}.virtual-table-hover-cell-#{$type}.virtual-table-cell-#{$type} {
                        background: var(--Colors-Use-Error-Pressed);
                        color: var(--yakit-colors-Error-100);
                    }
                } @else {
                    // 单色-其他颜色处理
                    .virtual-table-cell-#{$type} {
                        background: generate-transparen(#{fetch-color($type, "backgroundColor")}, 100%);
                        color: var(--Colors-Use-Neutral-Text-1-Title);
                    }

                    .virtual-table-hover-cell-#{$type} {
                        background: generate-transparen(#{fetch-color($type, "backgroundColor")}, 100%);
                        color: var(--Colors-Use-Neutral-Text-1-Title);
                    }
                    .virtual-table-hover-cell-#{$type}.virtual-table-cell-#{$type} {
                        // background: generate-transparen(#{fetch-color($type, "backgroundColor")}, 100%);
                        background: generate-transparen(#{fetch-hover-color($type, "backgroundColor")}, 100%);
                        color: var(--Colors-Use-Neutral-Text-1-Title);
                    }

                    .virtual-table-active-cell-#{$type} {
                        background: generate-transparen(#{fetch-color($type, "backgroundColor")}, 100%);
                        color: var(--Colors-Use-Neutral-Text-1-Title);
                    }
                    .virtual-table-active-cell-#{$type}.virtual-table-cell-#{$type} {
                        background: generate-transparen(#{fetch-hover-color($type, "backgroundColor")}, 100%);
                        color: var(--Colors-Use-Neutral-Text-1-Title);
                    }
                    .virtual-table-active-cell-#{$type}.virtual-table-hover-cell-#{$type}.virtual-table-cell-#{$type} {
                        background: generate-transparen(#{fetch-hover-color($type, "backgroundColor")}, 100%);
                        color: var(--Colors-Use-Neutral-Text-1-Title);
                    }
                }
            } @else {
                // 多色情况
                $gbColors: generate-colors($pre);
                .virtual-table-cell-#{generate-class-name($pre)} {
                    background: generate-gradient($gbColors, 20%);
                    color: var(--Colors-Use-Neutral-Text-1-Title);
                }

                .virtual-table-hover-cell-#{generate-class-name($pre)} {
                    background: generate-gradient($gbColors, 30%);
                    color: var(--Colors-Use-Neutral-Text-1-Title);
                }
                .virtual-table-hover-cell-#{generate-class-name($pre)}.virtual-table-cell-#{generate-class-name($pre)} {
                    background: generate-gradient($gbColors, 30%);
                    color: var(--Colors-Use-Neutral-Text-1-Title);
                }

                .virtual-table-active-cell-#{generate-class-name($pre)} {
                    background: generate-gradient($gbColors, 40%);
                    color: var(--Colors-Use-Neutral-Text-1-Title);
                }
                .virtual-table-active-cell-#{generate-class-name($pre)}.virtual-table-cell-#{generate-class-name($pre)} {
                    background: generate-gradient($gbColors, 40%);
                    color: var(--Colors-Use-Neutral-Text-1-Title);
                }
                .virtual-table-active-cell-#{generate-class-name($pre)}.virtual-table-hover-cell-#{generate-class-name($pre)}.virtual-table-cell-#{generate-class-name($pre)} {
                    background: generate-gradient($gbColors, 40%);
                    color: var(--Colors-Use-Neutral-Text-1-Title);
                }
            }

            $remaining: if(
                index($allTypes, $type) == length($allTypes),
                (),
                get-range($allTypes, index($allTypes, $type) + 1)
            );
            @if length($pre) < 3 {
                @include generate-permutations-class-name($remaining, $pre);
            } @else {
            }
        }
    }
}
